<template>
  <div>
    <v-dialog v-model="newDialog" scrollable persistent max-width="800px" :fullscreen="$vuetify.breakpoint.xsOnly">
      <v-card>
        <v-card-title>
          <span class="headline">{{name}}</span>
        </v-card-title>
        <v-divider ></v-divider>
        <v-card-text>
          <v-container grid-list-md>
            <v-form v-model="valid"  ref="newPublishForm">
            <v-layout wrap >
              <v-flex xs12 sm12 md12>
                <v-autocomplete :items="build.items" v-model="fields.version" item-text="text"
                                :rules="buildRules" item-value="value" label="构建包" autocomplete></v-autocomplete>
              </v-flex>
              <v-flex xs12 sm6 md6>
                <data-picker :title="'计划日期'" :ui="'dialog'" :date="rdate" :rules="rundateRules" @upDate="rDateValue"/>
              </v-flex>
              <v-flex xs12 sm6 md6>
                <time-picker :title="'计划时间'" :ui="'dialog'" :time="rtime" :rules="runtimeRules" @upDate="rTimeValue"/>
              </v-flex>
              <v-flex xs12 sm12 md12>
                <icon-item :field="fields.host" :items="host.items" :title="'发布主机'" @upSelect="getSelect"/>
              </v-flex>
              <v-flex xs12 sm12 md12>
                <v-textarea label="备注" outline v-model="fields.mem" :rules="noteRules" :error="noteError" :error-messages="noteMsg" required></v-textarea>
              </v-flex>
              <v-flex xs12 sm12 md12>
                <v-text-field label="项目名称" style="display:none;" v-model="fields.Project" disabled="disabled"></v-text-field>
              </v-flex>
            </v-layout>
            </v-form>
          </v-container>
          <small>*必填</small>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" @click.native="closeNewPublish($refs.newPublishForm)" small><h4>关闭</h4></v-btn>
          <v-btn color="error" @click.native="savePublish($refs.newPublishForm)" small><h4>保存</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <load-layer :loadDialog = "submitLoad" loadText="redmine正在处理申请中..."></load-layer>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('newPublish')
export default {
  name: 'newPublish',
  data: function () {
    return this.$store.state.newPublish
  },
  methods: {
    ...mapActions({
      closeNewPublish: 'closeNewPublish',
      savePublish: 'savePublish',
      loadPublishSelect: 'loadPublishSelect'
    }),
    rTimeValue (time) {
      this.rtime = time
    },
    rDateValue (date) {
      this.rdate = date
    },
    getSelect (data) {
      this.fields.host = data
    }
  },
  watch: {
    newDialog () {
      if (this.newDialog) {
        this.loadPublishSelect(this.pid)
      } else {
        this.$refs.newPublishForm.reset()
        this.rdate = ''
        this.rtime = ''
      }
    }
  },
  props: {
    newDialog: {
      type: Boolean,
      default: null
    },
    pid: {
      type: Number,
      default: null
    }
  },
  components: {
    'load-layer': () => import('../../components/loading/loadLayer'),
    'time-picker': () => import('../../components/dateTimePicker/timePicker'),
    'data-picker': () => import('../../components/dateTimePicker/dataPicker'),
    'icon-item': () => import('../../components/select/iconItem')
  }
}

</script>
